// 富文本编辑器
const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
  placeholder: 'Type here...',
  onChange(editor) {
    const html = editor.getHtml()
    // 也可以同步到 <textarea>
  }
}

const editor = createEditor({
  selector: '#editor-container',
  html: '<p><br></p>',
  config: editorConfig,
  mode: 'default', // or 'simple'
})

editor.disable()      // 设置为只读状态

// 信息查询
const informationInquiry = document.querySelector('.informationInquiry')
// 选课详细
const courseSelection = document.querySelector('.courseSelection')
// 修改密码
const updatePassword = document.querySelector('.updatePassword')
const updatePasswordShow = document.querySelector('.updatePasswordShow')
const updateCancel1 = document.querySelector('.updateCancel')
const updateSure1 = document.querySelector('.updatePasswordSure')
const updatePasswordShowInputs = document.querySelectorAll('.updatePasswordShow input')
// about
const about = document.querySelector('.about')
// 选择
const choose = document.querySelectorAll('.navChoose [class^="choose"] ul')   //主要列表功能
const choose3 = document.querySelector('.choose3')  //about的列表
// 文章盒子
const essays = document.querySelector('.essays')
const essayShow = document.querySelector('.essayShow')
// 文章标题
const essayShowTitle = document.querySelector('.essayShow h2')
// 关闭弹窗按钮
const essayShowCancel = document.querySelector('.essayShow .cancel')
// 控件栏DOM对象
const first = document.querySelector('.first')
const last = document.querySelector('.last')
const next = document.querySelector('.next')
const theLast = document.querySelector('.theLast')
const allPage = document.querySelector('.allPage')
// 输入框对象
const paged = document.querySelector('.paged')
// 页码总数DOM对象
const pageSum = document.querySelector('.controlTable select')
// 退出登录
const unLog = document.querySelector('.unLog')

// 定时器
let timeCord = null

// 页码
let page = 1
let pageNumber = 3
// 记录最大页数
let maxPage = 0
// 记录当前页数据行数量
let trNumber

// 初始化按钮
!function () {
  function list(e) {
    return () => {
      clearTimeout(timeCord)
      e.style.display = 'block'
    }
  }

  function close(e) {
    return () => {
      timeCord = setTimeout(() => {
        e.style.display = 'none'
      }, 500)
    }
  }

  // 打开信息查询的列表
  informationInquiry.addEventListener('mouseenter', list(choose[0]))
  informationInquiry.addEventListener('click', list(choose[0]))
  // 离开信息查询延时关闭列表
  informationInquiry.addEventListener('mouseleave', close(choose[0]))
  // 进入列表清除计时器
  choose[0].addEventListener('mouseenter', () => {
    clearTimeout(timeCord)
  })
  // 离开列表延时关闭
  choose[0].addEventListener('mouseleave', close(choose[0]))

  courseSelection.addEventListener('mouseenter', list(choose[1]))
  courseSelection.addEventListener('click', list(choose[1]))
  courseSelection.addEventListener('mouseleave', close(choose[1]))
  choose[1].addEventListener('mouseenter', () => {
    clearTimeout(timeCord)
  })
  choose[1].addEventListener('mouseleave', close(choose[1]))

  about.addEventListener('mouseenter', list(choose3))
  about.addEventListener('click', list(choose3))
  about.addEventListener('mouseleave', close(choose3))
  choose3.addEventListener('mouseenter', () => {
    clearTimeout(timeCord)
  })
  choose3.addEventListener('mouseleave', close(choose3))
}()

// 修改密码
updatePassword.addEventListener('click', (e) => {
  e.preventDefault()
  updatePasswordShow.style.display = 'block'
})

// 关闭修改密码弹窗
updateCancel1.addEventListener('click', () => {
  updatePasswordShowInputs[0].value = updatePasswordShowInputs[1].value = updatePasswordShowInputs[2].value = ''
  updatePasswordShow.style.display = 'none'
})

// 确认修改密码
updateSure1.addEventListener('click', () => {
  const count = JSON.parse(localStorage.getItem('countInformation'))
  // 获取旧密码和帐号
  const countNumber = count.countNumber
  const oldPassword = count.password
  if (!(updatePasswordShowInputs[0].value === oldPassword)) {
    alert('原密码不正确')
    return
  }
  const newPassword1 = updatePasswordShowInputs[1].value
  const newPassword2 = updatePasswordShowInputs[2].value
  if (newPassword1 === '') {
    alert('新密码不能为空')
    return
  } else if (!/^[0-9a-zA-Z]{1,12}$/.test(newPassword1)) {
    alert('密码不符合规范')
    return
  } else if (newPassword1 !== newPassword2) {
    alert('两次新输入密码不一致')
    return
  }
  axios({
    url: 'http://127.0.0.1:8080/LoginAndSign/CountPasswordUpdate',
    method: 'POST',
    params: {
      newPassword: newPassword1,
      countNumber
    }
  }).then(() => {
    alert('修改成功')
    updatePasswordShowInputs[0].value = updatePasswordShowInputs[1].value = updatePasswordShowInputs[2].value = ''
    updatePasswordShow.style.display = 'none'
  }).catch(() => {
    alert('修改失败')
  })
})

// 退出登录
unLog.addEventListener('click', () => {
  localStorage.clear('countInformation')
})

// 渲染文章列表
function showAllEssay() {
  axios({
    url: 'http://127.0.0.1:8080/Root/Major/download',
    params: {
      page,
      pageNumber
    }
  }).then(result => {
    const htmlStr = result.data.data.map((element, index) => {
      const encodedImage = element.imageBase64String    //Base64字符串
      return `
      <div class="essay" data-id="${index + 1}">
        <img src="${encodedImage == null ? '../../../../photos/essay2.jpg' : 'data:image/png;base64,' + encodedImage}" alt="">
        <h3>${element.id}. ${element.title}</h3>
        <br>
        <span>${element.textInformation}</span>
      </div>`
    }).join('')
    essays.innerHTML = htmlStr
  })
}

showAllEssay()

// 事件监听
essays.addEventListener('click', async (e) => {
  const element = e.target
  if (!element.classList.contains('essay') && !element.parentNode.classList.contains('essay')) {
    return
  }
  essayShow.style.display = 'block'
  const essayId = element.dataset.id || element.parentNode.dataset.id
  // 获取返回结果
  const result = (await axios({
    url: 'http://127.0.0.1:8080/Root/Major/getNoneDownloadEssay',
    params: {
      id: essayId
    }
  })).data.data
  essayShowTitle.innerHTML = result.title
  editor.setHtml(result.textInformation)
})

// 关闭弹窗
essayShowCancel.addEventListener('click', () => {
  essayShow.style.display = 'none'
})

// 获取表格页数
function getPage() {
  axios({
    url: 'http://127.0.0.1:8080/Root/Major/allPage',
    params: {
      pageNumber
    }
  }).then(result => {
    maxPage = allPage.innerHTML = result.data.data
  })
}

getPage()

// 表格空间监听
first.addEventListener('click', () => {
  page = 1
  showAllEssay(page, pageNumber)
})

last.addEventListener('click', () => {
  if (page > 1) {
    showAllEssay(--page, pageNumber)
  }
})

next.addEventListener('click', () => {
  console.log(page);
  if (page < maxPage) {
    showAllEssay(++page, pageNumber)
  }
})

theLast.addEventListener('click', () => {
  page = maxPage
  showAllEssay(page, pageNumber)
})

pageSum.addEventListener('change', () => {
  pageNumber = pageSum.value
  page = 1
  showAllEssay(page, pageNumber)
})

paged.addEventListener('change', () => {
  page = paged.value
  // 限定page范围
  page = page > maxPage ? maxPage : page
  page = page < 1 ? 1 : page
  showAllEssay(page, pageNumber)
})


// 获取UID
!function getUID() {
  const countNumber = JSON.parse(localStorage.getItem('countInformation')).countNumber
  axios({
    url: 'http://127.0.0.1:8080/getUID',
    params: {
      countNumber
    }
  }).then(result => {
    localStorage.setItem('UID', result.data.data)
  })
}()